<template>
  <div class="sendsingle">
    <h2>任务分配</h2>

    <van-cell-group>
      <van-field v-model="cellData.taskName" center>
        <template #label> <i>*</i> <span>任务名称：</span> </template>
      </van-field>

      <van-field v-model="cellData.implement || ''" readonly right-icon="play" @click="show(1)">
        <template #label> <i>*</i> <span>执行人：</span> </template>
      </van-field>
      <van-field v-model="cellData.check || ''" readonly right-icon="play" @click="show(2)">
        <template #label> <i>*</i> <span>验收人：</span> </template>
      </van-field>
      <van-field readonly>
        <template #label> <i>*</i> <span>计划时间：</span> </template>
        <template #input>
          <span class="plandate" @click="calendarShow = true"> {{ plandate }}</span>
          <!-- <div class="plandate">
            <div><van-icon name="clock-o" /> {{ startTime }}</div>
            至
            <div><van-icon name="clock-o" /> {{ endTime }}</div>
          </div> -->
        </template>
      </van-field>
      <van-field v-model="cellData.taskType || ''" readonly right-icon="play" @click="show(3)">
        <template #label> <i>*</i> <span>任务类型：</span> </template>
      </van-field>
      <!-- 特殊属性 -->
      <van-field v-if="specialObj.show" v-model="specialObj.value">
        <template #label>
          <i v-if="specialObj.isReport">*</i>
          <span>{{ specialObj.label }}</span>
        </template>
      </van-field>

      <van-field
        v-model="cellData.settlementType || ''"
        readonly
        right-icon="play"
        @click="show(4)"
      >
        <template #label> <i>*</i> <span>结算类型：</span> </template>
      </van-field>
      <van-field v-model="cellData.settlementTip || ''" readonly right-icon="play" @click="show(5)">
        <template #label> <i>*</i> <span>结算标签：</span> </template>
      </van-field>
      <van-field
        v-model="cellData.settlementLevel || ''"
        readonly
        right-icon="play"
        @click="show(6)"
      >
        <template #label> <i>*</i> <span>结算分级：</span> </template>
      </van-field>
      <van-field v-model="cellData.deliverable">
        <template #label> <i>*</i> <span>交付物要求：</span> </template>
      </van-field>
      <van-field v-model="cellData.describe" type="textarea" rows="1" autosize>
        <template #label> <span>任务描述：</span> </template>
      </van-field>
    </van-cell-group>

    <h2 @click="handleSave">保存</h2>

    <transition name="van-slide-up">
      <select-popup
        v-if="showpopup"
        :type="popupObj.type"
        :title="popupObj.title"
        :showlist="popupObj.showlist"
        :showkey="popupObj.showkey"
        :labelkey="popupObj.labelkey"
        :needSearch="popupObj.needSearch || false"
        :needLabel="popupObj.needLabel || false"
        :loading="loadStatus.loading"
        :finished="loadStatus.finished"
        @confirm="handlePopupCallback"
        @search="getPerson"
        @load="load"
        @change="
          (status) => {
            loadStatus.loading = status
          }
        "
      ></select-popup>
    </transition>

    <!-- 日历选择 -->
    <van-calendar v-model="calendarShow" color="#1989fa" type="range" @confirm="onConfirm" />
  </div>
</template>

<script>
import sendsingleMixin from "./mixins"
export default {
  name: "sendsingle",

  mixins: [sendsingleMixin]
}
</script>

<style lang="less">
.sendsingle {
  background-color: #f6f7fb;
  height: 100%;

  @h2Height: 6vh;

  h2 {
    background-color: #fff;
    color: #0a308f;
    text-align: center;
    line-height: @h2Height;
    box-shadow: 0 2px 2px #ebe9f4;
    margin-bottom: 1vh;

    &:nth-child(3) {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin-bottom: 0;
      background-color: #ffb900;
      color: #fff;
    }
  }

  .plandate {
    width: 100%;
    text-align: right;
    color: #9a9a9a;
  }

  // 重置vant样式
  .van-icon {
    display: inline-flex;
    align-items: center;
    color: #c7c7c7;
  }
  .van-cell-group {
    height: calc(100% - @h2Height * 2 - 1vh);
    overflow-y: scroll;
  }
  .van-field {
    padding: 0.1rem 0.15rem 0.1rem 0;
    line-height: 0.25rem;
  }
  .van-cell--required::before {
    left: 0.5rem;
  }
  .van-field__label {
    text-align: right;
    color: #9a9a9a;
    width: 7em;

    i {
      color: red;
    }
  }
  .van-field__right-icon {
    transform: translateY(5%);
  }
}
</style>
